<template>
	<view class="child-phone-status-page">
		<view class="student-status">
			<view class="label">手机状态</view>
			<view class="status"><image src="/static/icon/refresh-user.png" class="refresh-icon" @click="refresh"></image>{{curStud.mobileBrand}} </view>
		</view>
		<view class="add-device-box" @click="jumpPage">
			<view class="txt">添加设备</view>
			<van-icon name="add" color="#3C7CDC"/>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import {ref, computed} from 'vue'
	import { useStudentListStore } from "@/stores/useStudentList.js"
	import { useBound } from "@/hooks/useBound.ts"
		import { mock } from "@/utils/index"
		const { tipBoundStudent } = useBound()
	const studentStore = useStudentListStore();
	const curStud = computed(() => studentStore.currentStudent || {});
	const jumpPage = () =>{
			if(!mock.isLogged()){
					tipBoundStudent()
					return
				}
	
		uni.navigateTo({
			url:"/pagesA/addChildDevices/index"
		})
	}
	const emit = defineEmits(["refresPhoneStatus"])
	const refresh = () => {
		console.log('刷新')
		emit('refresPhoneStatus')
	}
	
</script>

<style lang="scss" scoped>
	.child-phone-status-page{
		min-height: 129upx;
		margin-bottom: 2upx;
		border-top-left-radius: 60upx;
		border-top-right-radius: 60upx;
		// background: linear-gradient(180deg,  #e5faf2 0%, #e8fbf3 50% #fafefd 100%);
		// background: linear-gradient(to bottom, #e5faf2, #e8fbf3, #fafefd); 
		background: linear-gradient(to bottom, #e5faf2, #e8fbf3, #fafefd);
		border-radius: 26upx 26upx 26upx 26upx;
		border: 1upx solid #FFFFFF;
		box-shadow: 2upx -12upx 0upx 6upx #36DD99;
		display:flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 17upx;
		.student-status{
			display: flex;
			justify-content: flex-start;
			align-items:flex-end;
			.label{
				font-weight: 600;
				font-size: 32upx;
				color: #333333;
			}
			.status{
				display: flex;
				align-items: center;
				margin-left: 22upx;
				font-weight: 400;
				font-size: 20upx;
				color: #999999;
				.refresh-icon{
					width: 36upx;
					height: 36upx;
					margin-right: 18upx;
				}
			}
		}
		.add-device-box{
			display: flex;
			justify-content: flex-end;
			align-items: center;
			.txt{
				font-weight: 400;
				font-size: 30upx;
				color: $themeColor;
				margin-right: 8upx;
			}
		}
	}
</style>